<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/footer.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/rightCon.css}" media="all">
    <style>
        .layui-form-checkbox[lay-skin=primary] span {
            padding-left: 30px;
            padding-right: 15px;
            line-height: 18px;
            background: 0 0;
            color: #323232;
        }
        .layui-transfer-header{
            background: rgba(15, 113, 226, 0.08);
            border-radius: 4px 4px 0px 0px;
            padding: 0 20px;
        }
        .layui-transfer-data{ padding:0 20px }
        .layui-transfer-active .layui-btn {
            background-color: #1D39C4;
        }
        .layui-transfer-active .layui-btn-disabled {
            /*background-color: #FBFBFB;
            border-color: #e6e6e6;*/
            color: #fff !important;
            background: linear-gradient(180deg, #A0CFFF 100%, #A0CFFF 100%);
            border-color: linear-gradient(180deg, #A0CFFF 100%, #A0CFFF 100%);
        }
    </style>
</head>

<body class="layui-layout-body layui-layout-body-scroll">
<div class="layui-body layui-body-bot">
    <!-- 内容主体区域 -->
    <div class="add-title"><span class="mr10px return"><img th:src="@{/static/img/icon_return.png}"></span><span>设备详情</span></div>
    <div class="scroll-box scroll-box-top scroll-box-bot bgWhite box-shadows border-radius1">
        <div class="scroll-box-padding">
            <div class="scroll-box-con">
                <article>
                    <div class="add-title-border">设备管理：</div>
                    <div class="form-style form-box form-user-new form-add-select">
                        <div>
                            <div class="form-title">
                                <label><em class="red">*</em>设备名称：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input disabled="" type="text" th:value="${device.deviceName}">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label><em class="red">*</em>安装位置/地址：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" disabled="" th:value="${device.address}">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label>设备负责人：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" disabled="" th:value="${device.manageUser}">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label>联系方式：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" disabled="" th:value="${device.manageTel}">
                                </p>
                            </div>
                        </div>
                    </div>
                </article>
                <div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <div class="add-title-border mt20px">使用部门范围</div>
                    </fieldset>

                    <div id="test2" class="demo-transfer"></div>
                </div>
                <!--<article>
                    <div class="add-title-border mt20px">使用部门范围</div>
                    <div class="use-con layui-form">
                        <div class="use-one border-radius4 border1px-ddd">
                            <h1><input type="checkbox" name="" lay-skin="primary" title="已选部门范围"></h1>
                            <nav class="use-list layui-form">
                                <div>
                                    <ul id="selected">

                                    </ul>
                                </div>
                            </nav>
                        </div>
                        <div class="use-two">
                            <div>
                                <p id="s"><img th:src="@{/static/img/arrow_right.png}"></p>
                                &lt;!&ndash;                                <p class="no-click" id="s1"><img th:src="@{/static/img/arrow_left.png}"></p>&ndash;&gt;
                                <p id="s1"><img th:src="@{/static/img/arrow_left.png}"></p>
                            </div>
                        </div>
                        <div class="use-three border-radius4 border1px-ddd">
                            <h1><input type="checkbox" name="" lay-skin="primary" title="可选部门范围"></h1>
                            <article class="use-list use-three-list layui-form">
                                <nav>
                                    <p>
                                        <span class="use-arrow cursor"><img th:src="@{/static/img/icon_select_right.png}"></span>
                                        <span class="mr5px" id="orgName"></span>
                                    </p>
                                    <ul id="optional">
                                        <li><input type="checkbox" name="dept" lay-skin="primary" title="彩付集团"></li>
                                        <li><input type="checkbox" name="dept" lay-skin="primary" title="上海一平知识产权代理有限公司"></li>
                                        <li><input type="checkbox" name="dept" lay-skin="primary" title="上海森威科技有限公司"></li>
                                        <li><input type="checkbox" name="dept" lay-skin="primary" title="彩付集团"></li>
                                        <li><input type="checkbox" name="dept" lay-skin="primary" title="上海一平知识产权代理有限公司"></li>
                                        <li><input type="checkbox" name="dept" lay-skin="primary" title="上海森威科技有限公司"></li>
                                    </ul>
                                </nav>
                            </article>
                        </div>
                    </div>
                </article>-->
            </div>
        </div>
    </div>
</div>
<div class="layui-footer layui-footer-one">
    <div class="btn-con textCenter layui-btn-container">
        <span class="btn-cancel return">取&nbsp;消</span>
        <span class="btn-submit layui-btn" lay-demotransferactive="getData">提&nbsp;交</span>
    </div>
</div>
<script th:src="@{/static/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">

    var id = [[${id}]]

    var selectDepts = [];

    var optionDepts = [];
    $(function () {
        $(".return").on('click', function () {
            window.history.back();
        })

        $("#submit").on('click', function () {
            save();
        });

        qie();

        //    加载当前可选部门
        loadOptionalDept();

        //    加载当前已选部门
        loadSelectedDept();

        //    全选
        layui.use(['form', 'jquery'], function () {
            var form = layui.form;
            var $ = layui.jquery;
            //点击全选, 勾选
            form.on('checkbox(allChoose)', function (data) {
                var child = $("#optional input[type='checkbox']");
                child.each(function (index, item) {
                    item.checked = data.elem.checked;
                });
                form.render('checkbox');
            });
        });


    });

    function loadOptionalDept() {
        $.ajax({
            url: "../device/getOptionalDept",
            type: "get",
            async: false,
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    optionDepts = data.data.deptName;
                }
            }
        })
    }

    function loadSelectedDept() {
        $.ajax({
            url: "../device/getSelectedDept",
            type: "get",
            async: false,
            dataType: "json",
            data: {id: id},
            success: function (data) {
                if (data.code == 0) {
                    if (data.data.length > 0) {
                        for (var i = 0; i < data.data.length; i++) {
                            selectDepts.push(data.data[i].id)
                        }
                    }
                }
            }
        })
    }

    //左侧菜单栏
    layui.use(['element', 'form', 'transfer', 'util'], function () {
        var element = layui.element;
        var form = layui.form;
        var transfer = layui.transfer
        var util = layui.util;
        //定义标题及数据源
        transfer.render({
            elem: '#test2'
            , title: ['可选部门范围', '已选部门']  //自定义标题
            , data: optionDepts
            , width: 360 //定义宽度
            , height: 370 //定义高度
            , value: selectDepts
            , id: 'key123'
            , parseData: function (res) {
                return {
                    "value": res.id //数据值
                    , "title": res.deptName //数据标题
                    // ,"disabled": res.disabled  //是否禁用
                    // ,"checked": res.checked //是否选中
                }
            }
        })
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function (othis) {
                var getData = transfer.getData('key123'); //获取右侧数据
                // JSON.parse(JSON.stringify(getData));
                //O他妈的K
                // console.log(JSON.parse(JSON.stringify(getData)))
                var str = "";
                if (JSON.parse(JSON.stringify(getData)).length > 0) {
                    for (var i = 0; i < JSON.parse(JSON.stringify(getData)).length; i++) {
                        str += JSON.parse(JSON.stringify(getData))[i].value + ","
                    }

                    var data = {id: id, str: str.slice(0, str.length - 1)}
                    $.ajax({
                        url: "../device/updateDept",
                        type: "post",
                        async: false,
                        dataType: "json",
                        data: data,
                        success: function (data) {
                            if (data.code == 200) {
                                layer.alert(data.msg, function () {
                                    window.location.href = "../device/toDeviceListPage"
                                })
                            }
                        }
                    })

                } else {
                    layer.msg("请选择部门")
                }

            }
        });
    });

    //下拉小图标
    function qie() {
        $('.use-list p span.use-arrow').click(function () {
            $(this).parent().siblings().slideToggle(300);
            if ($(this).find('img').attr('src') == '../static/img/icon_select_right.png') {
                $(this).find('img').attr('src', '../static/img/icon_select_down.png');
            } else {
                $(this).find('img').attr('src', '../static/img/icon_select_right.png')
            }
        })
    }
</script>
</body>

</html>
